<template>
  <el-dialog
    ref="wkDialog"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="500px"
    @close="close"
    title="设置管理部门"
  >
    <el-form
      ref="editRoleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="top"
    >
      <el-form-item
        label="选择管理部门"
        prop="manageDeptId"
        style="width: 100%"
      >
        <manageDep
          @submitDeps="submitDeps"
          ref="manage_dep"
          :manageDeptId="manageDeptId"
          :manageDeptName="manageDeptName"
        ></manageDep>
      </el-form-item>
    </el-form>
    <div class="" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="sureClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { roleListAPI } from "@/api/admin/employeeDep";
import manageDep from "../../components/manageDep";

export default {
  // 设置管理部门-弹窗
  name: "editManageDep",
  components: {
    manageDep,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    manageDeptId: {}, //管理部门id
    manageDeptName: {}, //管理部门名称
  },
  data() {
    return {
      ruleForm: {
        manageDeptId: "",
      },
      rules: {},
      manageDeptsId: "", //选择的管理部门
    };
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    },
    submitDeps(e) {
      this.manageDeptsId = e;
    },
    sureClick() {
      this.$emit("sureClick", this.manageDeptsId);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  margin-top: 10px;
  /deep/ .el-form-item__label {
    line-height: 30px;
    padding-bottom: 0;
  }
}
</style>
